<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": ""
      }
    }
    </route>

<script lang="ts" setup>
import Navbar from '../../components/navbers/navbarr.vue'
import { ref, onUnmounted } from 'vue'
import { mobileRules, passwordRules, codeRules } from '../../utils/rules'
import { useUserStore } from '@/store/user'
import { toast } from '@/utils/toast'

// 控制注册方式切换
const isPass = ref(true) // true表示密码注册，false表示短信验证码注册
const mobile = ref('')
const password = ref('')
const code = ref('')
const agree = ref(false)
const showPassword = ref(false)
const time = ref(0) // 验证码倒计时
let timer: number | null = null
const loading = ref(false)

const userStore = useUserStore()

// 发送验证码
const sendCode = async () => {
  if (time.value > 0) return
  if (!mobile.value) {
    toast.error('请输入手机号')
    return
  }

  try {
    loading.value = true
    await userStore.getSmsCode({
      mobile: mobile.value,
      type: 'register' // 注册类型的验证码
    })
    // 开始倒计时
    time.value = 60
    timer = setInterval(() => {
      time.value--
      if (time.value <= 0 && timer) {
        clearInterval(timer)
        timer = null
      }
    }, 1000)
  } catch (error) {
    console.error('发送验证码失败:', error)
    toast.error('发送验证码失败，请重试')
  } finally {
    loading.value = false
  }
}

// 注册提交
const submit = async () => {
  if (!agree.value) {
    toast.warning('请先同意用户协议和隐私条款')
    return
  }

  if (!mobile.value) {
    toast.warning('请输入手机号')
    return
  }

  if (!code.value) {
    toast.warning('请输入验证码')
    return
  }

  if (isPass.value && !password.value) {
    toast.warning('请输入密码')
    return
  }

  try {
    loading.value = true
    if (isPass.value) {
      // 密码注册
      await userStore.register({
        mobile: mobile.value,
        password: password.value,
        code: code.value
      })
    } else {
      // 短信验证码注册
      await userStore.register({
        mobile: mobile.value,
        code: code.value,
        password: '123456' // 短信注册时设置默认密码
      })
    }

    toast.success('注册成功')

    // 注册成功后跳转到登录页面
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }, 1500)
  } catch (error: any) {
    console.error('注册失败:', error)
    toast.error(error.message || '注册失败，请重试')
  } finally {
    loading.value = false
  }
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<template>
  <view class="login-container">
    <view>
      <Navbar/>
    </view>
    
    <view class="login-content">
      <view class="login-header">
        <text class="login-title">注册</text>
      </view>
      
     <!-- 使用 van-form 包裹表单元素 -->
      <van-form @submit="submit" class="input-group">
        <van-field
          v-model="mobile"
          name="mobile"
          :rules="mobileRules"
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
        />

         <!-- 短信验证码登录时的验证码输入框 -->
        <van-field
          v-model="code"
          name="code"
          :rules="codeRules"
          placeholder="请输入短信验证码"
          type="number"
          maxlength="6"
        >
          <template #button>
            <text 
              class="send-code-btn" 
              :class="{ 'disabled': time > 0 }"
              @click="sendCode"
              style="color: #16C2A3;"
            >
              {{ time > 0 ? `${time}s后重新发送` : '发送验证码' }}
            </text>
          </template>
        </van-field>
        
        <!-- 密码登录时的密码输入框 -->
        <van-field
          v-model="password"
          name="password"
          :rules="passwordRules"
          placeholder="请输入密码，8-20位数字、字母或符号"
          :type="showPassword ? 'text' : 'password'"
        >
          <template #button>
            <view class="eye-icon" @click="showPassword = !showPassword">
              <image 
                :src="showPassword ? '/static/open.png' : '/static/close.png'" 
                mode="aspectFit"
                class="eye-img"
              />
            </view>
          </template>
        </van-field>
      </van-form>
        
        <!-- 协议勾选部分 -->
<view class="agreement">
  <label class="agreement-label">
    <checkbox 
      :checked="agree" 
      @click="agree = !agree" 
      color="#16C2A3"
      style="transform: scale(0.8);"
    />
    <text class="agreement-text">
      <text style="font-size: 26rpx;">我已同意&nbsp;</text>
      <text class="protocol-link">优医协议</text>
    </text>
  </label>
</view>
        
        <button class="login-button" @click="submit" :loading="loading">
    {{ loading ? '注册中...' : '确定' }}
  </button>
        
        <view style="display: flex;justify-content: left;margin-left: 17px;margin-top: 150rpx;">
          <view class="divider"></view>
          <view class="third-party-login">
          <text class="third-party-title">第三方登录</text>
        </view>
        <view class="divider"></view>
        </view>
        <view class="scrimg">
          <img src="/static/qq.png" alt="" class="qqimg">
        </view>
      </view>
    </view>
  </template>
  
  <style lang="scss" scoped>
  :deep(){
    .uni-radio-input{
    width: 30rpx;
    height: 30rpx;
  }
  .van-field{
    height: 120rpx;
    line-height: 100rpx;
  }
  }
  .login-container {
  padding: 20rpx;
}

.login-content {
  margin-top: 40rpx;
}

.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60rpx;
  padding: 0 30rpx;
}

.login-title {
  color: #121826;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 48rpx;
  line-height: 72rpx;
}

.sms-login-link {
  color: #3C3E42;
  font-family: PingFang SC;
  font-size: 30rpx;
  line-height: 32rpx;
}

.input-group {
  margin-bottom: 40rpx;
  // padding: 0 30rpx;
  width: 100%;
}

.input-field {
  height: 100rpx;
  width: 100%;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #c3c3c5;
  font-family: PingFang SC;
}

.code-input {
  position: relative;
  
  .send-code-btn {
    position: absolute;
    right: 0;
    top: 30rpx;
    color: #16c2a3;
    font-size: 26rpx;
    
    &.disabled {
      color: #999;
    }
  }
}

.agreement {
  margin: 30rpx 0;
  padding: 0 30rpx;
  
  radio-group {
    display: flex;
    align-items: center;
  }
}

.protocol-link {
  color: #16c2a3;
  font-size: 26rpx;
}

.divider {
  height: 1rpx;
  width: 200rpx;
  background-color: #eee;
  margin: 0 20rpx;
}

.login-button {
  background-color: #16c2a3;
  color: white;
  border-radius: 50rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  width: calc(100% - 60rpx);
  margin: 0 30rpx;
}

.forgot-password {
  font-family: PingFang SC;
  font-size: 26rpx;
  line-height: 40rpx;
  margin-top: 40rpx;
  padding: 0 30rpx;
  color: #999;
}

.third-party-login {
  text-align: center;
  margin-top: -20rpx;
  
  .third-party-title {
    color: #C3C3C5;
    font-family: PingFang SC;
    font-size: 25rpx;
    line-height: 40rpx;
    padding: 0 20rpx;
  }
}

.scrimg {
  width: 85rpx;
  height: 70rpx;
  margin: 50rpx auto;
  
  .qqimg {
    width: 100%;
    height: 100%;
  }
}

:deep() {
  .van-field__button {
    // 直接定位到van-field的按钮区域
    .eye-icon {
      width: 37rpx;  // 增加宽度
      height: 37rpx; // 增加高度
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .eye-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.input-field {
  height: 100rpx;
  width: 100%;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
  font-size: 20rpx;
  color: #c3c3c5;
  font-family: PingFang SC;
  padding-right: 60rpx; /* 为眼睛图标留出空间 */
}
  </style>